﻿@using Radzen.Blazor
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Forms

@inherits RadzenComponent

@using System.Linq

@if (Steps != null)
{
    <CascadingValue Value=this>
        @Steps
    </CascadingValue>
}
@if (Visible)
{
<div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
    <ul role="tablist">
        @for (var i = 0; i < steps.Count; i++)
        {
            var step = steps[i];
            @if (step.Visible)
            {
                <li class="@step.GetItemCssClass()" @attributes="step.Attributes" style="@step.Style">
                    <a title="@step.Title" aria-label="@step.AriaLabel"
                       @onclick="@(async (args) => { if (!step.Disabled) { await SelectStep(step, true); } })"
                       href="javascript:void(0)" class="rz-menuitem-link">
                        <span class="rz-steps-number">@(steps.Where(s => s.Visible).ToList().IndexOf(step) + 1)</span>
                        @if (step.Template != null)
                        {
                            @step.Template(step)
                        }
                        else
                        {
                            <span class="rz-steps-title">@step.Text</span>
                        }
                    </a>
                </li>
            }
        }
    </ul>

    @for (var i = 0; i < steps.Count; i++)
    {
        var step = steps[i];
        @if (step.Visible)
        {
            @if (IsSelected(i, step))
            {
                <div class="rz-widget-content">
                    @if (step.ChildContent != null)
                    {
                        @step.ChildContent
                    }
                </div>
            }
        }
    }
    @if(ShowStepsButtons)
    {
    <div class="rz-steps-buttons">
        <a title="@PreviousTitle" arial-label="@PreviousAriaLabel"
           class='@($"rz-steps-prev {(IsFirstVisibleStep() ?  "rz-state-disabled" : "")}")' @onclick="@PrevStep"
           href="javascript:void(0)"><i class="rzi">navigate_before</i>@PreviousText</a>
        <a title="@NextTitle" arial-label="@NextAriaLabel"
           class='@($"rz-steps-next {(IsLastVisibleStep() ?  "rz-state-disabled" : "")}")' @onclick="@NextStep"
           href="javascript:void(0)">@NextText<i class="rzi">navigate_next</i></a>
    </div>
    }
</div>
}
